<template>
  <div>
    <div class="app-container">
      <div class="search-container">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-button :disabled="false" type="primary" @click="Addhybridization()">新增</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="datatable" border height="540px" style="width: 100%">
          <el-table-column prop="id" label="序号" align="center" width="50px">
            <template #default="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="耳号" align="center" width="140px">
            <template #default="scope">
              <el-select v-model="scope.row.earTag" placeholder="请选择耳号" style="width:100px" @change="getBuildColum()">
                <el-option v-for="item in mathererars" :key="item.earTag" :label="item.earTag" :value="item.earTag" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="首配公羊" align="center" width="140px">
            <template #default="scope">
              <el-select v-model="scope.row.firstMatingRam" placeholder="请选择耳号" style="width:100px">
                <el-option v-for="item in fathererars" :key="item.earTag" :label="item.earTag" :value="item.earTag" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="配种方式" align="center" width="140px">
            <template #default="scope">
              <el-select v-model="scope.row.breedStyle" placeholder="请选择配种方式" style="width:100px">
                <el-option label="鲜精-阴道" :value="1" />
                <el-option label="鲜精-子宫角" :value="2" />
                <el-option label="冻精-阴道" :value="3" />
                <el-option label="冻精-子宫角" :value="4" />
                <el-option label="模糊本交" :value="5" />
                <el-option label="精准本交" :value="6" />

              </el-select>
            </template>

          </el-table-column>
          <el-table-column label="种母发情类型" align="center" width="140px">
            <template v-slot="scope">
              <el-select v-model="scope.row.oestrusType" placeholder="种母发情类型" style="width:100px">
                <el-option label="自然发情" :value="1" />
                <el-option label="同期发情" :value="2" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="首配评分" align="center" width="140px">
            <template v-slot="scope">
              <el-input v-model="scope.row.firstScore" placeholder="首配评分" style="width:100px" />
            </template>
          </el-table-column>
          <el-table-column label="当前栋舍" align="center" width="140px">
            <template v-slot="scope">
              <el-select v-model="scope.row.currentBuilding" placeholder="请选择栋舍" :disabled="true" clearable>
                <el-option v-for="item in cottages" :label="item.ridgepoleName" :value="item.ridgepoleId"
                  @click="getColumns(item.ridgepoleId)" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="当前栏位" align="center" width="140px">
            <template v-slot="scope">
              <el-select v-model="scope.row.currentField" placeholder="请选择栏位" :disabled="true" clearable>
                <el-option v-for="item in columns" :label="item.columnName" :value="item.columnManagementId" />
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="转入栋舍" align="center" width="140px">
            <template v-slot="scope">
              <el-select v-model="scope.row.toBuildingManageId" placeholder="请选择栋舍" :disabled="false" clearable>
                <el-option v-for="item in cottages" :label="item.ridgepoleName" :value="item.ridgepoleId"
                  @click="getColumns(item.ridgepoleId)" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="转入栏位" align="center" width="140px">
            <template v-slot="scope">
              <el-select v-model="scope.row.toColumMangementId" placeholder="请选择栏位" :disabled="false" clearable>
                <el-option v-for="item in columns" :label="item.columnName" :value="item.columnManagementId" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="繁殖状态" align="center" width="200px">
            <template v-slot="scope">
              <el-select v-model="scope.row.breedState" placeholder="繁殖状态">
                <el-option label="后备空杯" :value="1" />
                <el-option label="空杯" :value="2" />
                <el-option label="返情空杯" :value="3" />
                <el-option label="流产空杯" :value="4" />
                <el-option label="空胎空杯" :value="5" />
                <el-option label="断奶空杯" :value="6" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="事件日期" align="center" width="140px">
            <template v-slot="scope">
              <el-date-picker v-model="scope.row.eventDate" type="date" placeholder="事件日期" style="width:115px"
                format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            </template>
          </el-table-column>


        </el-table>
        <div>
          <el-button link type="danger" @click="Addform()"> + 增行 </el-button>
          <el-button link type="danger" @click="Deleteform()"> - 删行 </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
//耳号
import sheepfile from '@/api/ProductionManagement/index'
import sheepAblactations from '@/api/ProductionManagement/SheepAblactation/index'
//历史记录添加
import hybridization from '@/api/Hybridization/index'
//栋舍栏位
import purcure from '@/api/PurchaseMent/index'
import { purcoreQuery, buildingIdQuery } from '@/api/PurchaseMent/model'



import { useRouter } from 'vue-router'
const router = useRouter();


//种母耳号
const mathererars = ref([])
const getSheepmaears = () => {
  const form = reactive({
    presentState: 1,
    sheepType: 2,

  })
  sheepfile.getReproductionState(form.presentState, form.sheepType).then(res => {
    mathererars.value = res.data
  })
}


onMounted(() => {
  getSheepfaears();
  getSheepmaears();
  getRidgepole();
  getBuildColum();
});



//种公耳号
const fathererars = ref([])
const getSheepfaears = () => {
  const form = reactive({
    presentState: 1,
    sheepType: 1
  })
  sheepfile.updatesheepfilestatus(form.presentState, form.sheepType).then(res => {
    fathererars.value = res.data
  })
}

//获取栋舍
const cottages: any = ref([])
const getRidgepole = () => {
  sheepAblactations.getRidgepoleAsync().then(res => {
    cottages.value = res.data.data
  })
}
//获取栏位根据栋舍Id
const columns = ref([])
const getColumns = (ridgepoleId: number) => {
  columns.value = []
  sheepAblactations.getColumnByRidId(ridgepoleId).then(res => {
    columns.value = res.data
  })
}






//添加字段

const datatable = reactive([
  {

    "lastBreedDate": null,
    "earTag": "",
    "motherVariety": null,
    "firstMatingRam": '',
    "maleBreed": null,
    "breedStyle": null,
    "oestrusType": null,
    "firstScore": '',
    "currentBuilding": null,
    "currentField": null,
    "toBuildingManageId": null,
    "toColumMangementId": null,
    "breedState": null,
    "eventDate": new Date(),
    "userId": null,
  },
])
const c = ref(0);
//增行
const Addform = () => {
  c.value = 1;
  datatable.forEach((item) => {
    c.value++;
  });
  datatable.push({

    "lastBreedDate": null,
    "earTag": "",
    "motherVariety": null,
    "firstMatingRam": '',
    "maleBreed": null,
    "breedStyle": null,
    "oestrusType": null,
    "firstScore": '',
    "currentBuilding": null,
    "currentField": null,
    "toBuildingManageId": null,
    "toColumMangementId": null,
    "breedState": null,
    "eventDate": new Date(),
    "userId": null,
  });
};
//删行
const Deleteform = () => {
  datatable.pop();
};


//反填栋舍栏位根据耳号
const getBuildColum = async () => {
  for (const item of datatable) {
    try {
      console.log(item.earTag);

      const res = await sheepAblactations.getBuildByEar(item.earTag);
      item.earTag = res.data.earTag;
      getRidgepole();
      item.currentBuilding = res.data.buildingId;
      console.log(item.currentBuilding);

      getColumns(item.currentBuilding);
      item.currentField = res.data.columnId;


    } catch (error) {
      console.error(`获取数据出错: ${error}`);
    }
  }
}




//添加
const Addhybridization = () => {

  console.log(datatable)
  hybridization.addhybridization(datatable).then(res => {
    if (res.data > 0) {
      ElMessage({
        message: '添加成功',
        type: 'success',
      })
      router.push({
        name: "HyBridization",
      })
    }
  })
}




</script>
